<template>
	<view class="container" :style="{ height: webStyle.height }">
		<image class="bgi" :src="imgPath + 'login/Background.png'" mode=""></image>
		<view class="page1">
			<view class="cont-t">
				<image class="logo" :style="{ opacity: companyName == '言影' ? 1 : 0 }" :src="imgPath + 'login/logo.png'" mode="widthFix"></image>
				<view class="hello">
					<view class="text1">你好</view>
					<view class="text1">欢迎使用{{ companyName }}</view>
					<view class="text2">注册账号，即可开始使用</view>
				</view>
			</view>
			<view class="cont-b">
				<view class="form" v-if="!isPassword">
					<view class="form-item">
						<view class="label">手机号</view>
						<view class="row">
							<view class="box text">+86</view>
							<view class="box input-box">
								<input class="ipt" type="tel" placeholder="请输入您的手机号码" placeholder-class="placeholder" v-model="mobile" />
							</view>
						</view>
					</view>
					<view class="form-item">
						<view class="label">验证码</view>
						<view class="row">
							<view class="box input-box">
								<input class="ipt" type="text" v-model="smsCode" placeholder="请输入验证码" placeholder-class="placeholder" />
							</view>
							<view class="box getCode" @click="sendcode()">
								<text v-if="!smsState" class="activate">获取验证码</text>
								<text v-else class="un-activate">重新发送({{ times }})</text>
							</view>
						</view>
					</view>
					<view class="form-item"></view>
				</view>
				<view class="form" v-else>
					<view class="form-item">
						<view class="label">账号</view>
						<view class="row">
							<view class="box input-box" @touchstart="bbb(1)">
								<input class="ipt" ref="ipt1" :focus="ipt1Focus" v-if="iptShow1" @focus="iptShow2 = false" @blur="aaa(1)" type="tel" placeholder="请输入您的手机号码" placeholder-class="placeholder" v-model="mobile" />
								<text class="ipt" style="display: block; font-family: UICTFontTextStyleBody; height: 1.4rem; min-height: 1.4rem; overflow: hidden; text-overflow: clip; white-space: nowrap" v-else>{{ mobile }}</text>
							</view>
						</view>
					</view>
					<view class="form-item">
						<view class="label">密码</view>
						<view class="row">
							<view class="box input-box" @touchstart="bbb(2)">
								<!-- <input class="ipt" disabled="true" :adjust-position="false" style="position: absolute; z-index: -999; opacity: 0" type="text" placeholder="" placeholder-class="placeholder" @tap.prevent="" value="" /> -->
								<input class="ipt" ref="ipt2" :focus="ipt2Focus" v-if="iptShow2" @focus="iptShow1 = false" @blur="aaa(2)" :password="true" :adjust-position="false" type="password" placeholder="请输入密码" placeholder-class="placeholder" v-model="password" />
							</view>
						</view>
					</view>
					<view class="form-item" v-show="0">
						<view class="tips-btn" @tap="toPage('/pages/ResetPassword/ResetPassword')">
							<view class="text">忘记密码</view>
						</view>
					</view>
				</view>
				<view class="f" @tap="isCheck = !isCheck">
					<view class="check">
						<radio :checked="isCheck" color="#00997f" />
					</view>
					<view class="text">已阅读并同意</view>
					<view class="text2" @tap="toAgreement('https://ai.yainoo.com/videoagent/moderzip/Yainoo_Protocol/【' + companyName + 'AIGC创作平台】用户协议.html')">《用户协议》</view>
					<view class="text">和</view>
					<view class="text2" @tap="toAgreement('https://ai.yainoo.com/videoagent/moderzip/Yainoo_Protocol/隐私政策(' + companyName + ').html')">《隐私协议》</view>
				</view>
				<view class="cont-btn">
					<view class="btn style1" @tap="loginSubmit">
						<view class="text">立即登录</view>
						<image class="huojian" :src="imgPath + 'login/huojian.png'" mode="widthFix"></image>
					</view>
					<template v-if="0">
						<!-- #ifdef MP-WEIXIN  -->
						<button class="btn style1" open-type="getPhoneNumber" @getphonenumber="getphonenumber">{{ "getphonenumber" }}</button>
						<button class="btn style1" open-type="getUserInfo" @getuserinfo="getUserInfo">{{ "getUserInfo" }}</button>
						<button class="btn style1" open-type="chooseAvatar" @chooseavatar="chooseAvatar">{{ "chooseAvatar" }}</button>
						<button class="btn style1" @tap="getUserProfile">{{ "getUserProfile" }}</button>
						<!-- #endif -->
						<view class="btn style2" v-if="wxLoginText">
							<view class="text">
								<view class="tips">登录code:</view>
								<input style="width: max-content" :value="wxLoginText" type="text" />
							</view>
						</view>
						<view class="btn style2" v-if="codeText">
							<view class="text">
								<view class="tips">手机code:</view>
								<input style="width: max-content" :value="codeText" type="text" />
							</view>
						</view>
					</template>
					<view class="btn style2">
						<view class="text" @tap="changeLoginType">
							{{ isPassword ? "验证码登录" : "账号登录" }}
						</view>
						<!-- #ifdef MP-WEIXIN  -->
						<button class="text" v-if="isCheck" style="margin-left: 8vw; font-size: 32rpx" open-type="getPhoneNumber" @getphonenumber="getphonenumber">{{ "手机号快捷登录" }}</button>
						<view class="text" v-else @tap="isCheckF">
							{{ "手机号快捷登录" }}
						</view>
						<!-- #endif -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import * as api from "@/api/login.js";
import { tools } from "../../utils/util";
const times = 60;
export default {
	name: "login",
	data() {
		return {
			// 是否同意用户隐私协议
			isCheck: false,
			iptShow1: true,
			iptShow2: true,
			ipt1Focus: false,
			ipt2Focus: false,

			// 静态资源通用地址
			imgPath: tools.imgPath,
			companyName: tools.companyName,
			// 是否密码登录
			isPassword: true,
			// 是否存在第三方用户信息
			isParty: false,
			// 第三方用户信息数据
			partyData: {},
			// 正在加载
			isLoading: false,
			// 图形验证码信息
			captcha: {},
			// 短信验证码发送状态
			smsState: false,
			// 倒计时
			times,
			// 手机号
			mobile: "",
			// 密码
			password: "",
			// 短信验证码
			smsCode: "",
			// 系统信息
			systemInfo: {},
			// 动态样式
			webStyle: {
				height: ""
			},
			//code
			wxLoginText: "",
			//code
			codeText: ""
		};
	},
	methods: {
		aaa(a) {
			if (a == 1) {
				setTimeout(() => ((this.iptShow2 = true), (this.ipt1Focus = false)), 100);
			} else {
				setTimeout(() => ((this.iptShow1 = true), (this.ipt2Focus = false)), 100);
			}
		},
		bbb(b) {
			if (b == 1) {
				this.iptShow2 = false;
				this.iptShow1 = true;
				setTimeout(() => {
					this.ipt1Focus = true;
				}, 100);
			} else {
				this.iptShow1 = false;
				this.iptShow2 = true;
				setTimeout(() => {
					this.ipt2Focus = true;
				}, 100);
			}
		},
		initAccountInfo() {
			let account = uni.getStorageSync("account");
			if (account?.password) {
				this.mobile = account.mobile;
				this.password = account.password;
			}
		},
		getUserProfile(e) {
			wx.getUserProfile({
				desc: "用于完善会员资料",
				success: (res) => {
					if (res.errMsg == "getUserProfile:ok") {
						console.log(res);
						// self.login(res.userInfo, {
						// 	iv: res.iv,
						// 	encrypted_data: res.encryptedData
						// });
					} else {
						console.log("登录失败");
					}
				}
			});
		},
		getUserInfo(e) {
			console.log("getUserInfo", e);
		},
		chooseAvatar(e) {
			console.log("chooseAvatar", e);
		},
		// 跳转协议页面
		toAgreement(url) {
			uni.setStorageSync("AgreementURL", url);
			this.toPage("/pages/Agreement/Agreement");
		},
		// 判断用户同意用户隐私协议
		isCheckF() {
			if (!this.isCheck) {
				return tools.easyToast("请先同意用户隐私协议！");
			}
		},
		// 获取手机号登录
		async getphonenumber(e) {
			if (!this.isCheck) {
				return tools.easyToast("请先同意用户隐私协议！");
			}
			this.codeText = e.detail.code;
			// let hostValue = "";
			// if (tools.companyName == "随拍") {
			// 	hostValue = "47.121.176.211";
			// } else if (tools.companyName == "默客") {
			// 	hostValue = "47.121.185.165";
			// }else if (tools.companyName == "极智拍") {
			// 	hostValue = "47.121.185.165";
			// }
			let send = {
				headImg: "",
				phoneCode: this.codeText,
				nickName: "",
				reqType: "applet",
				regCode: "",
				hostValue: tools.vadIp,
				vadIp: tools.vadIp,
				password: "",
				iphone: ""
			};
			let regCode = uni.getStorageSync("sharerInfo");
			if (regCode) {
				send.regCode = regCode;
				uni.removeStorageSync("sharerInfo");
			}
			console.log("获取手机号登录", { regCode, send });
			let res = null;
			if (tools.vadIp == "121.196.245.10") {
				send.special = "";
				res = await api.lsPostAuthLoginWX(send, {
					header: {
						"Merchant-Id": tools.MerchantId || tools.merchantId || ""
					}
				});
			} else {
				res = await api.postAuthLoginWX(send);
			}
			if (res) {
				uni.setStorageSync("token", res.data.token);
				uni.setStorageSync("userInfo", JSON.stringify(res.data));
				tools.easyToast("登录成功！", "success");
				await this.getUserVipStatus();
				setTimeout(() => {
					this.back();
				}, 1680);
			}
		},
		// 回退
		back() {
			let pages = getCurrentPages();
			if (pages.length > 1) {
				let prevPage = pages[pages.length - 2];
				if (prevPage) {
					if (prevPage.$vm.loginDialogShowSucc) {
						prevPage.$vm.loginDialogShowSucc();
					}
				}
				uni.navigateBack({
					delta: 1
				});
			} else {
				uni.setStorageSync("toHome", {
					footerBarListAc: 1
				});
				uni.reLaunch({
					url: "/pages/index/index"
				});
			}
		},
		// 获取系统info
		initSystemInfo(isUpdate = true) {
			const that = this;
			return new Promise((resolve, reject) => {
				uni.getSystemInfo({
					success(payload) {
						if (isUpdate) {
							that.systemInfo = payload;
							that.webStyle.height = `${that.systemInfo.windowHeight}px`;
						}
						resolve(payload);
					}
				});
			});
		},
		// 获取用户会员
		async getUserVipStatus() {
			const res3 = await api.getUserVipStatus();
			if (!res3) return;
			let userInfo = JSON.parse(uni.getStorageSync("userInfo") || "{}");
			let resData = res3.data;
			userInfo.vipName = resData[resData.length - 1]?.memberName;
			userInfo.vipTime = resData[resData.length - 1]?.finalTime;
			userInfo.vipId = resData[resData.length - 1]?.memberType;
			userInfo.vipIds = res3.data.map((e) => e.memberType);
			// userInfo.vipIds = [
			//     "1732410233318158337",
			//     "1738862163041185793"
			// ]

			//终端个人详情页
			const res = await api.getHomeDetailInfo();
			if (!res) return;
			userInfo.detailInfo = res.data;
			userInfo.goldNum = res.data.rightList.find((e) => e.rightsName == "金币" || e.id == "1741564651566090455")?.totalRightBalance ?? 0;
			userInfo.detailInfoRightList = res.data.rightList.map((e) => {
				switch (e.id) {
					// "短视频时长"
					case "1":
						e.totalRightBalance = (e.totalRightBalance / 60000).toFixed(2) + "分钟";
						break;
					// "直播合成时长"
					case "1710556060574937089":
						e.totalRightBalance = (e.totalRightBalance / 60000).toFixed(2) + "分钟";
						break;
					// "金币"
					case "1741564651566090455":
						e.totalRightBalance += "个";
						break;
					// ""
					default:
						e.totalRightBalance += "次";
						break;
				}
				return e;
			});
			uni.setStorageSync("userInfo", JSON.stringify(userInfo));
		},
		// 跳转页面
		toPage(path, type = "navigateTo") {
			uni[type]({
				url: path
			});
		},
		// 点击发送短信验证码
		sendcode(sceneArg) {
			if (this.smsState) return;
			// event.stopPropagation();
			sceneArg = sceneArg || "applet";
			if (this.mobile.length == 0) {
				tools.easyToast("请输入手机号！");
				return;
			}
			if (!this.isCheck) {
				return tools.easyToast("请先同意用户隐私协议！");
			}
			this.timer();
			api
				.sendcode({
					phone: this.mobile,
					reqType: sceneArg,
					vadIp: tools.vadIp || "47.106.224.147"
				})
				.then((res) => {
					if (res) {
						tools.easyToast(res.data);
					}
				});
		},
		// 切换登录模式
		changeLoginType() {
			this.isPassword = !this.isPassword;
		},
		// 点击登录按钮
		loginSubmit() {
			if (!this.isCheck) {
				return tools.easyToast("请先同意用户隐私协议！");
			}
			if (this.mobile == "aaa") {
				return this.wxLogin();
			}
			this.isPassword ? this.loginApi() : this.sendcodelogin();
		},
		// 获取手机号登录
		wxLogin() {
			const that = this;
			wx.login({
				success(res) {
					console.log(res);
					that.wxLoginText = res.code;
				}
			});
		},
		// 密码登录
		async loginApi() {
			let loginForm = {
				iphone: this.mobile,
				password: this.password,
				vadIp: tools.vadIp
			};
			// if(this.$route.query.gid){
			//     loginForm.regCode = this.$route.query.gid;
			// };
			if (!loginForm.iphone) {
				return tools.easyToast("请输入手机号！");
			}
			if (!loginForm.password) {
				return tools.easyToast("请输入密码！");
			}
			let res = null;
			console.log({
				vipId: tools.vadIp,
				merchantId: tools.merchantId
			});
			if (tools.vadIp == "121.196.245.10") {
				res = await api.lsLogin(loginForm, {
					header: {
						"Merchant-Id": tools.MerchantId || tools.merchantId || ""
					}
				});
			} else {
				res = await api.login(loginForm);
			}
			if (res) {
				uni.setStorageSync("token", res.data.token);
				uni.setStorageSync("userInfo", JSON.stringify(res.data));
				tools.easyToast("登录成功！", "success");
				let res2 = await api.getUserUlogin();
				if (res2 && !res2.data[0]) {
					uni.setStorageSync("changeNewUserDialogShow", true);
				}
				await this.getUserVipStatus();
				uni.setStorageSync("account", {
					mobile: this.mobile,
					password: this.password
				});
				setTimeout(() => {
					this.back();
				}, 1680);
			}
		},
		// 验证码登录
		async sendcodelogin() {
			let loginForm = {
				code: this.smsCode,
				iphone: this.mobile,
				vadIp: tools.vadIp
			};
			if (!loginForm.iphone) {
				return tools.easyToast("请输入手机号！");
			}
			if (!loginForm.code) {
				return tools.easyToast("请输入验证码！");
			}
			let regCode = uni.getStorageSync("sharerInfo");
			console.log("验证码登录", { regCode });
			if (regCode) {
				loginForm.regCode = regCode;
				uni.removeStorageSync("sharerInfo");
			}
			let res = null;
			if (tools.vadIp == "121.196.245.10") {
				res = await api.lsSendcodelogin(loginForm, {
					header: {
						"Merchant-Id": tools.MerchantId || tools.merchantId || ""
					}
				});
			} else {
				res = await api.sendcodelogin(loginForm);
			}
			if (res) {
				uni.setStorageSync("token", res.data.token);
				uni.setStorageSync("userInfo", JSON.stringify(res.data));
				tools.easyToast("登录成功！", "success");
				let res2 = await api.getUserUlogin();
				if (res2 && !res2.data[0]) {
					uni.setStorageSync("changeNewUserDialogShow", true);
				}
				await this.getUserVipStatus();
				setTimeout(() => {
					this.back();
				}, 1680);
			}
		},
		// 执行定时器
		timer() {
			const app = this;
			app.smsState = true;
			const inter = setInterval(() => {
				app.times = app.times - 1;
				if (app.times <= 0) {
					app.smsState = false;
					app.times = times;
					clearInterval(inter);
				}
			}, 1000);
		}
	},
	created() {
		this.initSystemInfo();
		this.initAccountInfo();
	},
	beforeDestroy() {
		uni.setStorageSync("account", {
			mobile: this.mobile,
			password: this.password
		});
	},
	watch: {
		show(val) {
			if (val) {
				this.$refs.LoginDialog.open();
			} else {
				this.$refs.LoginDialog.close();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: 4vw;
	overflow: auto;
	// background: linear-gradient(45deg, rgba(0, 0, 0, 1) 0%, rgba(1, 26, 7, 1) 33.9%, rgba(3, 71, 49, 1) 76.9%, rgba(65, 115, 115, 1) 100%), rgba(22, 48, 67, 1);
}

.bgi {
	position: fixed;
	z-index: -1;
	width: 100vw;
	height: 100vh;
	top: 0vw;
	left: 0vw;
}

.page1 {
	flex: 1;
	overflow: auto;
	// height: 100%;
	position: relative;
	box-sizing: border-box;

	.cont-t {
		flex: 3;
		display: flex;
		flex-direction: column;
		justify-content: end;

		.logo {
			width: 35vw;
			margin: 5vh 0vw;
		}

		.hello {
			font-size: 5vh;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			.text1 {
				margin-bottom: 1vh;
			}
			.text2 {
				font-size: 24rpx;
			}
		}
	}

	.cont-b {
		flex: 5;
		padding-top: 1.2vh;
		display: flex;
		flex-direction: column;

		.form {
			margin-top: 5vw;

			.form-item {
				font-size: 32rpx;
				font-weight: 500;
				margin-bottom: 2vh;

				.label {
					font-size: 32rpx;
					font-weight: 500;
					line-height: 22.4px;
					color: rgba(0, 153, 127, 1);
				}

				.row {
					display: flex;
					margin-top: 3vw;

					.box {
						border-radius: 2.5vw;
						min-height: 10vw;
						background: rgba(255, 255, 255, 0.08);
						backdrop-filter: blur(26px);
						display: flex;
						justify-content: center;
						align-items: center;
						padding: 0vw 3vw;

						&.text {
							font-size: 36rpx;
							font-weight: 500;
							color: rgba(255, 255, 255, 1);
							margin-right: 2vw;
						}

						&.input-box {
							flex: 1;
							box-sizing: border-box;
							padding: 0vw 2vw;
							font-size: 28rpx;
							position: relative;
							.ipt {
								width: 100%;
								height: 100%;
								color: #fff;
							}

							.placeholder {
								font-weight: 400;
								color: rgba(116, 153, 141, 1);
							}
						}

						&.getCode {
							margin-left: 2vw;
							width: 23vw;
							font-size: 3vw;
							font-weight: 400;
							color: rgba(0, 153, 127, 1);
						}
					}
				}
				.tips-btn {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(116, 153, 141, 1);
					text-align: right;
				}
			}
		}

		.f {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 6vw;
			padding-bottom: 8vw;
			.check {
				width: 5vw;
				margin-right: 2.5vw;
				.icon {
					width: 100%;
					display: block;
				}
			}
			.text {
				font-size: 3vw;
				color: rgba(166, 166, 166, 1);
			}

			.text2 {
				font-size: 3vw;
				color: rgba(255, 255, 255, 1);
			}
		}

		.cont-btn {
			flex: 1;
			box-sizing: border-box;
			padding-top: 0vh;

			.btn {
				margin-top: 5.2vw;
				height: 12vw;
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 2.5vw;
				font-size: 32rpx;

				&.style1 {
					background: rgba(0, 153, 127, 1);
					position: relative;

					.text {
						font-weight: 400;
						color: rgba(255, 255, 255, 1);
					}

					.huojian {
						width: 30%;
						position: absolute;
						bottom: 0vw;
						right: 2.5vw;
					}
				}

				&.style2 {
					background: transparent;
					height: 8vw;

					.text {
						color: rgba(0, 153, 127, 1);
						margin-left: 5vw !important;
					}
				}
			}
		}
	}
}
</style>
